<template>
  <div class="popup">
    <div class="main">
      <div class="main-header">
        <p>新建模板</p>
        <i class="iconfont icon-guanbi" @click="close"></i>
      </div>
      <div class="form">
        <el-form ref="ruleFormRef" :model="form" :rules="rules">
          <el-form-item label="模板标题" prop="templateName">
            <el-input v-model="form.templateName" type="text" maxlength="60" />
          </el-form-item>
          <el-form-item label="邮件标题" prop="emailName">
            <el-input v-model="form.emailName" type="text" maxlength="60" />
          </el-form-item>
          <el-form-item label="正文" prop="content">
            <editor v-model="form.content" style="border:1px solid #dcdee0"></editor>
          </el-form-item>
          <el-form-item label="应用场景" prop="scene">
            <el-input v-model="form.scene" type="text" maxlength="20" />
          </el-form-item>
          <el-form-item label="语言" prop="lang">
            <el-select v-model="form.lang" placeholder="请选择协作成员" style="width: 100%">
              <el-option v-for="item in data.langList" :key="item.value" :label="item.name"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="main-footer flex flex-align-items-center">
        <p class="font-14 pointer" @click="close">取消</p>
        <p class="font-14 pointer" @click="submitForm(ruleFormRef)">确定</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import Editor from '@/views/staging/components/editor.vue';
import { defineProps, defineEmits, ref } from 'vue';
import data from '@/js/data.js';

const props = defineProps(['info']);
const emit = defineEmits(['change', 'close']);

const rules = {
  templateName: [
    { required: true, message: '模板标题不可为空', trigger: 'blur' },
  ],
  emailName: [
    { required: true, message: '邮件标题不可为空', trigger: 'blur' },
  ],
  scene: [
    { required: true, message: '应用场景不可为空', trigger: 'blur' },
  ],
  lang: [
    { required: true, message: '语言不可为空', trigger: 'blur' },
  ]
};

const ruleFormRef = ref();
const form = ref({
  ...props.info
});

const submitForm = async formEl => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      emit('change', { ...form.value });
    } else {
      console.log('error submit!', fields)
    }
  })
}
const close = () => {
  emit('close');
}
</script>

<style lang="less" scoped>
.main {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  width: 780px;
  height: 100%;
  background: #fff;

  .form {
    height: calc(100% - 116px);
    overflow-y: auto;
    padding: 24px 16px 0;

    &::-webkit-scrollbar {
      width: 0;
    }

    &::v-deep {
      .el-form-item {
        margin-bottom: 24px;

        .el-form-item__label {
          width: 72px !important;

          &::before {
            display: none;
          }
        }

        .el-input, .el-select {
          width: 100%;
          height: 32px;
        }
      }
    }
  }

  .main-footer {
    height: 64px;
    padding: 0 16px;
    background: #fff;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, .05);
    border-radius: 0 0 2px 2px;
    justify-content: end;

    p {
      width: 70px;
      height: 32px;
      border-radius: 2px;
      text-align: center;
      margin-left: 24px;

      &:first-child {
        border: 1px solid #d9d9d9;
        color: #333;
        line-height: 30px;
      }

      &:last-child {
        background: @main-color;
        color: #fff;
        line-height: 32px;
      }
    }
  }
}
</style>